<template>
  <div class="app-container">
    <el-table
      :row-class-name="tableRowClassName"
      :data="orderList"
      :header-row-style="{
        'background-color': '#E6E6E6',
        'font-weight': 'bold',
        color: '#333',
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      align="center"
      height="650"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column show-overflow-tooltip align="center" prop="code" label="订单编号"/>
      <el-table-column show-overflow-tooltip align="center" prop="income" label="订单收入"/>

      <el-table-column show-overflow-tooltip align="center" prop="pay" label="订单支出"/>

      <el-table-column align="center" label="订单费用明细">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="() => seeItem(scope.row)"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
    <el-dialog
      :visible.sync="dialogFormVisible"
      title="订单费用明细"
      width="70%"
    >
      <div style="display: inline-flex;">
        <div style="margin: 15px;">
          <span>订单编号:</span>
          <span>{{ dialogCode }}</span>
        </div>
        <div style="margin: 15px;">
          <span>订单收入:</span>
          <span>{{ dialogIncome }}</span>
        </div>
      </div>
      <el-table
        :row-class-name="tableRowClassName"
        :data="detailList"
        :header-row-style="{
          'background-color': '#E6E6E6',
          'font-weight': 'bold',
          color: '#333',
        }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        align="center"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
      >
        <el-table-column show-overflow-tooltip align="center" prop="orderCode" label="内部产品编号"/>
        <el-table-column show-overflow-tooltip align="center" prop="purchasePrice" label="原材料请购"/>
        <el-table-column show-overflow-tooltip align="center" prop="isFullAssis" label="是否全外协">
          <template slot-scope="scope">
            <span>{{ scope.row.isAssist == 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="fullAssistPrice" label="全外协费用"/>
        <el-table-column show-overflow-tooltip align="center" prop="productCost" label="生成成本"/>
        <el-table-column show-overflow-tooltip align="center" prop="otherCost" label="其他费用"/>
        <el-table-column show-overflow-tooltip align="center" prop="partAssistPrice" label="部分外协费用"/>
      </el-table>
      <el-pagination
        :current-page="dialogpage"
        :total="dialogtotal"
        :page-size="dialoglimit"
        style="padding: 30px 0; text-align: end"
        layout="total, prev, pager, next,jumper"
        @current-change="dialogfetchData"
      />
    </el-dialog>
  </div>
</template>

<script>
import user from '../../api/acl/user.js'
export default {
  components: {
  },
  data() {
    return {
      dialogIncome: '',
      dialogCode: '',
      orderId: '',
      detailList: [],
      dialogFormVisible: false,
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 10, // 每页记录数
      dialogtotal: 0, // 数据库中的总记录数
      dialogpage: 1, // 默认页码
      dialoglimit: 10, // 每页记录数
      orderList: []
    }
  },
  // 监听上面文本框搜索
  watch: {
  },

  created() {},
  mounted() {
    this.listFinancialOrder()
  },
  methods: {
    seeItem(val) {
      this.dialogpage = 1
      this.dialogCode = val.code
      this.dialogIncome = val.income
      this.orderId = val.id
      this.listFinancialOrderDetail()
      this.dialogFormVisible = true
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.deleteFlag == 1) {
        return 'warning-row'
      }
      return ''
    },
    dialogfetchData(val) {
      this.dialogpage = val
      this.listFinancialOrderDetail()
    },
    fetchData(val) {
      this.page = val
      this.listFinancialOrder()
    },
    listFinancialOrder() {
      user
        .listFinancialOrder({
          limit: this.limit,
          page: this.page
        })
        .then((response) => {
          this.total = response.total
          this.orderList = response.list
        })
    },
    listFinancialOrderDetail() {
      user
        .listFinancialOrderDetail({
          orderId: Number(this.orderId),
          limit: this.dialoglimit,
          page: this.dialogpage
        })
        .then((response) => {
          this.dialogtotal = response.total
          this.detailList = response.list
        })
    },
  }
}
</script>
<style>
.el-table .warning-row {
    background:#ff02027a;
  }
</style>
